<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    //使用v-bind的形式 可以使子组件 获得父组件的属性  使用this.$emit获得父组件 可以给子组件的函数调用父组件的方法
    <login :name="username" @find="findall"></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个局部组件
    const login={

        template :"<div><input type='button' value='点我' @click='change'></div>",
        //接受数据 (设置属性)
        props:['name'],
        // this指子组件
        data(){
            return {uname: this.name}
        },
        methods: {

            change:function () {

              //调用 vue对象的函数（父组件）
              this.$emit('find');
            }


        }
    }

    const app = new Vue(
        {
            el: "#app",
            data: {
                username :"lwj"
            },
            methods: {
                //定义一个父组件的函数
                findall()
                {
                    alert("Vue实例中定义的函数!");
                }
            },
            components:{
                login
            }
        }
    )
</script>
</body>
</html>